<template>
  <div class="report-form-content">
    <el-tabs type="border-card">
      <el-tab-pane label="合同补充协议">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="补充协议" name="1">
            <div class="report-list" v-if="obj">
              <label>补充协议经办人：</label>
              <span>{{ showIdLabel(userList, obj.supplementalUserId, 'name') }}</span>
            </div>
            <div class="report-list" v-if="obj">
              <label>补充协议经办部门：</label>
              <span>{{ showIdLabel(organizationList, obj.supplementalDepartmentId, 'organizationName') }}</span>
            </div>
            <div class="report-list" v-if="obj">
              <label>补充协议编号：</label>
              <span>{{ obj.supplementalContractNo }}</span>
            </div>
            <div class="report-list" v-if="obj">
              <label>补充协议名称：</label>
              <span>{{ obj.supplementalContractName }}</span>
            </div>
            <div class="report-list"  v-if="obj">
              <label>补充协议创建时间：</label>
              <span>{{ obj.createTime }}</span>
            </div>
            <div class="report-list"  v-if="obj">
              <label>补充协议增加金额：</label>
              <span>{{ obj.supplementalAmount }}</span>
            </div>
            <div class="report-list" v-if="obj">
              <label>补充原因：</label>
            </div>
            <div class="report-list"  v-if="obj">
              <span>{{ obj.supplementalReason }}</span>
            </div>
          </el-collapse-item>
          <el-collapse-item title="补充协议附件" name="2">
            <el-table :data="oFile"
                style="width: 100%; margin-top: 20px"
                row-key="id"
                border
                default-expand-all>
              <el-table-column type="selection" width="55" />
              <el-table-column label="附件类型">
                <template v-slot="{row}">
                  {{ showIdLabel(contractFiletypeList, row.type, 'name') }}
                </template>
              </el-table-column>
              <el-table-column prop="original" label="附件名称" />
              <el-table-column align="center" label="操作" width="160px" fixed="right">
                <template #default="scope">
                  <el-button type="primary" link @click="downloadFile1(scope.row)">下载</el-button>
                  <el-button type="primary" link @click="viewFile1(scope.row)">预览</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="协议合同信息" name="3">
            <div class="report-list" v-if="obj">
              <label>合同内容：</label>
            </div>
            <div class="report-list"  v-if="obj">
              <span v-html="obj.supplementalContent"></span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="合同详情">
        <contractMainDetail v-if="obj" :contractInitialId="obj.contractInitialId" />
      </el-tab-pane>
    </el-tabs>
    <!-- <van-tabs :active="active1" type="card" :animated="true" :swipeable="true">
      <van-tab title="合同补充协议">
        <van-tabs :active="active2">
          <van-tab title="补充协议">
            
          </van-tab>
          <van-tab title="补充协议附件">
            <ul class="files-list" v-if="obj.attachments && obj.attachments.length > 0">
              <li v-for="item in obj.attachments" :key="item.id">
                <div class="files-list-1">
                  <div class="files-list-content">
                    <p><span class="list-content-hindline">{{ item.original }}</span> {{ bytesToSize(item.size) }}</p>
                    <p><span>上传于 {{ item.createTime }}</span></p>
                  </div>
                </div>
              </li>
            </ul>
            <van-empty description="暂无附件" v-else />
          </van-tab>
          <van-tab title="协议合同信息">
            <div class="report-list" v-if="obj">
              <label>合同内容：</label>
            </div>
            <div class="report-list"  v-if="obj">
              <span v-html="obj.supplementalContent"></span>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
      <van-tab title="合同详情">
        
      </van-tab>
    </van-tabs>  -->
    <el-dialog v-model="attachmentVisible" title="附件预览" width="70%" top="2vh">
      <attachmentPreview :attachmentId="previewAttachmentId" />
      <div style="text-align:right;">
        <el-button type="danger" @click="attachmentVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet} from "@/config/http";
import {svc, showIdLabel, getListPageSize, bytesToSize} from "@/config/common";
import { useRoute, useRouter } from 'vue-router'
import contractMainDetail from '@/views/components/contract/contractMainDetail.vue'
import attachmentPreview from '@/views/components/base/attachmentPreview.vue'
import initListStore from '@/store/modules/initList'

const props = defineProps({
  contractSupplementalId: {
    required: true,
    type: String,
  }
})

let activeNames = ref(['1'])
let obj = ref(null)
let oFile = ref([])
let userList = initListStore().userList
let organizationList = initListStore().organizationList

// const initList = async () => {
//   let p1= doGet(svc, '/user/page', {pageSize: getListPageSize()}, false) // 用户
//   let p2 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false) // 部门
//   let resArray = await Promise.all([p1, p2])
//   userList.value = resArray[0]['records']
//   organizationList.value = resArray[1]['records']
// }

const initObj = async (val) =>  {
  if (val) {
    obj.value = await doGet(svc, `/contract-initial-supplemental/${val}`, {}, true)
    oFile.value = await doGet(svc, '/contract-initial-supplemental-attachment/listByField', {field: 'contractInitialSupplementalId', values: obj.value.id}, false)
  }
}

watch(() => props.contractSupplementalId, async val => {
  await initObj(val)
  // await initList()
},{immediate:true})

const downloadFile1 = (row) => {
  doDownload(svc, '/customAttachment/download/' + row.attachmentId, {})
}
const viewFile1 = (row) => {
  attachmentVisible.value = true
  setTimeout(() => {
    previewAttachmentId.value = row.attachmentId
  },100)
}

</script>

<style scoped lang="scss">
.report-form-content {
  padding: 20px;
}
.tabs-list-head-2 {
  padding-left: 0 !important;
}
.tabs-list-head-2 span {
  font-size: 22px !important;
  color: #1ac4ad !important;
}
.tabs-list-head {
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.tabs-list-head span {
  font-size: 18px;
  color: #303133;
  font-weight: bold;
}
.tabs-list-head-1 {
  margin-bottom: 30px;
}
.tabs-list-type {
  display: flex;
  align-items: center;
  justify-content: center;
}
.update-log {
  width: 100%;
  margin: 30px 0;
}
.update-log-1 {
  margin-top: 0;
}
.report-list {
  width: 100%;
  // width: 33%;
  margin: 15px;
  // display: flex;
  // align-items: center;
  /* justify-content: space-between; */
}
.report-list-a {

}
.report-list-a p {
  margin-left: 55px;
}
.report-list span:nth-child(1) {
  display: inline-block;
  // width: 120px;
  // text-align: right;
}
.steps {
  margin: 20px 0
}
</style>
